<template>
  <div id="china_map_box">
    <div id="container">
      <p class="center">
        <el-button
          plain
          v-show="mapOption.geo[0].map !== 'china'"
          @click="returnChinaMap"
          type="primary"
          icon="el-icon-arrow-left"
          >返回全国地图</el-button
        >
      </p>

      <IEcharts
        :option="mapOption"
        theme="shine"
        @click="clickMapChart"
      ></IEcharts>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import Vue from "vue";
Vue.prototype.$echarts = echarts;
import "echarts/map/js/china.js";
import IEcharts from "vue-echarts-v3/src/full";
// 地图需要导入
import "echarts/theme/shine.js";
IEcharts.registerMap("china", require("echarts/map/json/china.json"));
IEcharts.registerMap(
  "山东",
  require("echarts/map/json/province/shandong.json")
);
IEcharts.registerMap("安徽", require("echarts/map/json/province/anhui.json"));
IEcharts.registerMap("四川", require("echarts/map/json/province/sichuan.json"));
IEcharts.registerMap("山西", require("echarts/map/json/province/shanxi.json"));
IEcharts.registerMap("新疆", require("echarts/map/json/province/xinjiang.json"));
IEcharts.registerMap("西藏", require("echarts/map/json/province/xizang.json"));
IEcharts.registerMap("青海", require("echarts/map/json/province/qinghai.json"));
IEcharts.registerMap("云南", require("echarts/map/json/province/yunnan.json"));
IEcharts.registerMap("甘肃", require("echarts/map/json/province/gansu.json"));
IEcharts.registerMap("宁夏", require("echarts/map/json/province/ningxia.json"));
IEcharts.registerMap("山西", require("echarts/map/json/province/shanxi.json"));
IEcharts.registerMap("内蒙古", require("echarts/map/json/province/neimenggu.json"));
IEcharts.registerMap("黑龙江", require("echarts/map/json/province/heilongjiang.json"));
IEcharts.registerMap("吉林", require("echarts/map/json/province/jilin.json"));
IEcharts.registerMap("辽宁", require("echarts/map/json/province/liaoning.json"));
IEcharts.registerMap("河北", require("echarts/map/json/province/hebei.json"));
IEcharts.registerMap("陕西", require("echarts/map/json/province/shanxi1.json"));
IEcharts.registerMap("山东", require("echarts/map/json/province/shandong.json"));
IEcharts.registerMap("河南", require("echarts/map/json/province/henan.json"));
IEcharts.registerMap("江苏", require("echarts/map/json/province/jiangsu.json"));
IEcharts.registerMap("湖北", require("echarts/map/json/province/hubei.json"));
IEcharts.registerMap("湖南", require("echarts/map/json/province/hunan.json"));
IEcharts.registerMap("贵州", require("echarts/map/json/province/guizhou.json"));
IEcharts.registerMap("广西", require("echarts/map/json/province/guangxi.json"));
IEcharts.registerMap("海南", require("echarts/map/json/province/hainan.json"));
IEcharts.registerMap("江西", require("echarts/map/json/province/jiangxi.json"));
IEcharts.registerMap("福建", require("echarts/map/json/province/fujian.json"));
IEcharts.registerMap("浙江", require("echarts/map/json/province/zhejiang.json"));
IEcharts.registerMap("台湾", require("echarts/map/json/province/taiwan.json"));
IEcharts.registerMap("广东", require("echarts/map/json/province/guangdong.json"));
export default {
  components: {
    IEcharts,
  },
  data() {
    return {
      mapOption: {
        tooltip: {
          trigger: "item",
          // formatter: '{b}'
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        geo: [
          {
            name: "地图",
            type: "map",
            map: "china",
            roam: false,
            selectedMode: "single",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
          },
        ],
        calculable: true,
        series: [
          {
            name: "",
            type: "map",
            map: "china",
            roam: false,
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            data: [],
          },
        ],
      },
      provincesDataArr: [
        { name: "山东", value: this.randomData() },
        { name: "安徽", value: this.randomData() },
      ],
      // 点击后能进入市级地图的省份
      // 全部省份没添加：'北京', '天津', '上海', '重庆', '香港', '澳门', '台湾'
      canClickProvinceArr: [
        "云南",
        "内蒙古",
        "吉林",
        "四川",
        "宁夏",
        "安徽",
        "山东",
        "山西",
        "广东",
        "广西",
        "新疆",
        "江苏",
        "江西",
        "河北",
        "河南",
        "浙江",
        "海南",
        "湖北",
        "湖南",
        "甘肃",
        "福建",
        "西藏",
        "贵州",
        "辽宁",
        "陕西",
        "青海",
        "黑龙江",
      ],
      shandongCitiesDataArr: [{ name: "济南市", value: this.randomData() }],
    };
  },
  created() {
    this.mapOption.series[0].data = this.provincesDataArr;
  },
  mounted() {},
  computed: {},
  methods: {
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    clickMapChart(event, instance, ECharts) {
      // 初次点击，都能获得正确的 event.name 值；
      // 点击"返回全国地图"后，只有赋值了的省份，点击时才能正确获得 event.name 值。
      console.log("event.name=");
      console.log(event.name);
      // 点击后能进入市级地图的省份
      // 市级不让点击了，即不进入县级地图
      if (event.name !== "" && this.canClickProvinceArr.includes(event.name)) {
        if (event.name === "山东") {
          this.mapOption.geo[0].map = event.name;
          this.mapOption.series[0].map = event.name;
          this.mapOption.series[0].data = this.shandongCitiesDataArr;
        } else {
          this.mapOption.geo[0].map = event.name;
          this.mapOption.series[0].map = event.name;
        }
      }
    },
    returnChinaMap() {
      this.mapOption.geo[0].map = "china";
      this.mapOption.series[0].map = "china";
      this.mapOption.series[0].data = this.provincesDataArr;
    },
  },
};
</script>

<style scoped>
#china_map_box {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  /* height: 100%; */
  height: 100vh;
  margin: auto 0;
}
.btn {
  position: absolute;
  right: 10%;
  z-index: 999;
}
.center {
  text-align: center;
}
</style>
